<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul,li{
				list-style-type: none;
			}
			li>ul>li:hover{
				background-color: #DAE7D5;
			}
			div.hasimg:hover img{
				-webkit-transform:rotate(90deg);
			}
			/*伪类选择器*/
			ul>li:hover>ul{
				display: block;
			}
			ul>li{
				display: block;
			}
			ul>li > ul{
				display: none;
			}
			a[href]{
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<div id="">
			<ul>
				<li>
					<div class="hasimg">
						<img id="arrow" src="img/eg_arrow.gif"/><label for="arrow">邮箱服务1</label>
					</div>
					<ul>
						<li><a href="">未读邮件（10）</a></li>
						<li><a href="">收件箱</a></li>
						<li><a href="">草稿箱</a></li>
						<li><a href="">已发送</a></li>
						<li><a href="">已删除邮件</a></li>
						<li><a href="">垃圾邮件</a></li>
						<li><a href="">病毒文件夹</a></li>
					</ul>
				</li>
			</ul>
			
			<ul>
				<li>
					<div class="hasimg">
						<img id="arrow" src="img/eg_arrow.gif"/><label for="arrow">邮箱服务2</label>
					</div>
					<ul>
						<li><a href="">发送彩信</a></li>
						<li><a href="">个人通讯录</a></li>
						<li><a href="">企业通讯录</a></li>
						<li><a href="">邮箱选项</a></li>
						<li><a href="">查找</a></li>
						<li><a href="">帮助</a></li>
						<li><a href="">退出</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>
